<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/pintuer.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/admin.css">
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/pintuer.js"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/toastr.css">
<script src="${pageContext.request.contextPath}/js/toastr.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		$(function() {
			var prePage = ${info.prePage};
			var nextPage = ${info.nextPage};
			var firstPage = ${info.firstPage};
			var lastPage = ${info.lastPage};
			$(".prePage")
					.click(
							function() {
								if (prePage == 0) {
									toastr.options.positionClass = 'toast-center-center';
									toastr.error("当前已经是第一页了");
								} else {
									var url = "${pageContext.request.contextPath}/enterBorrowMessage?page="
											+ prePage;
									submitForm(url);
								}
								return false;
							})
			$(".nextPage")
					.click(
							function() {
								if ((prePage + 1) == lastPage) {
									toastr.options.positionClass = 'toast-center-center'
									toastr.error("当前已经是最后一页了");
								} else {
									var url = "${pageContext.request.contextPath}/enterBorrowMessage?page="
											+ nextPage;
									submitForm(url);
								}
								return false;
							})
			$(".endPage")
					.click(
							function() {

								var url = "${pageContext.request.contextPath}/enterBorrowMessage?page="
										+ lastPage;
								submitForm(url);
								return false;
							})

		})
		function submitForm(actionUrl) {
			var formElement = document.getElementById("listform");
			formElement.action = actionUrl;
			formElement.submit();
		}
		function changesearch() {
			var url = "${pageContext.request.contextPath}/searchReaderBorrowMsg";
			submitForm(url);
		}
	</script>
	<script type="text/javascript">
		function deleteReader(emId,node) {
			var bookId = $(node).parent().parent().prev().children().first().get(0);
			var id = $(bookId).val();
			if (confirm("确定该用户已归还?")) {
				$.ajax({
							type : "POST",
							url: "${pageContext.request.contextPath}/returnBook",
							data: {"user" : emId,"bookId":id},
							success : function(data) {
								if (data.result == "操作成功") {
									toastr.options.positionClass = 'toast-center-center'
									toastr.success("归还成功,刷新页面生效");
								} else {
									toastr.options.positionClass = 'toast-center-center'
									toastr.error("unknow erro!");
								}
							}
						});
				return false;
			}
		}
	</script>
	<form method="post" action="" id="listform">
		<div class="panel admin-panel">
			<div class="panel-head">
				<strong class="icon-reorder"> 借阅信息列表</strong> <a href=""
					style="float: right; display: none;">添加字段</a>
			</div>
			<div class="padding border-bottom">
				<ul class="search" style="padding-left: 10px;">
					<li><input type="text" placeholder="请输入读者姓名搜索"
						name="readerName" class="input titleinput"
						style="width: 250px; line-height: 17px; display: inline-block" />
						<a href="javascript:void(0)"
						class="button border-main  icon-search" onclick="changesearch()">
							搜索</a></li>
				</ul>
			</div>
			<table class="table table-hover text-center">
				<tr class="trHeader">
					<th width="200" style="padding-left: 20px;">ID</th>
					<th width="100">姓名</th>
					<th width="100">已借阅书籍</th>
					<th width="100">未归还书籍</th>
					<th width="200">操作</th>
				</tr>
				<c:forEach items="${list}" var="msg">
					<tr class="tempTr">
						<td id="td"><c:out value="${msg.id}"></c:out></td>
						<td><c:out value="${msg.name}"></c:out></td>
						<td><select name="year" class="input year"
							style="width: 150px; line-height: 17px; display: inline-block">
								<c:forEach items="${msg.borrowData}" var="bookData">
									<option value="${bookData.bookId}">
									${bookData.bookName}&nbsp;
                                    <f:formatDate value="${bookData.borrowDate}" pattern="yyyy年MM月dd日"/> -
                                    <f:formatDate value="${bookData.returnDate}" pattern="yyyy年MM月dd日"/>
									</option>
								</c:forEach>
						</select></td>
						<td>
						<select name="year" class="input bookId"
							style="width: 150px; line-height: 17px; display: inline-block">
								<c:forEach items="${msg.returnData}" var="returnData">
									<option value="${returnData.bookId}">
									${returnData.bookName}&nbsp;
                                    <f:formatDate value="${returnData.returnDate}" pattern="yyyy年MM月dd日"/>
									</option>
								</c:forEach>
						</select>
						</td>
						<td id="hello" class="return"><div class="button-group">
								<a style="margin-left: 15px;" class="button border-red" href="#"
									onclick="deleteReader('${msg.id}',this)"><span
									class="icon-trash-o"></span> 确认归还</a></td>
					</tr>

				</c:forEach>

				<tr>
					<td colspan="8"><div class="pagelist">
							<button class="button border-main prePage"
								>上一页</button>
							&nbsp;&nbsp;&nbsp;
							<button class="button border-main nextPage"
								>下一页</button>
							&nbsp;&nbsp;&nbsp;
							<button class="button border-main endPage">尾页</button>
						</div></td>
				</tr>


			</table>
		</div>
	</form>

</body>
</html>